<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta name="referrer" content="no-referrer" />
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/details.css" />
		<link rel="stylesheet" type="text/css" href="css/music.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="js/axios.js" type="text/javascript" charset="utf-8"></script>
		<!-- jquery -->
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- jQuery Cookie 插件在线地址用于方便获取cookie的值 -->
		<!-- <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> -->
		<script src="js/jquery-cookie.min.js" type="text/javascript" charset="utf-8"></script>
		<title>在线音乐播放</title>
	</head>
	<body>
		<div id="biBox">
			<!-- 导航栏 -->
			<div id="banner">
				<!-- 网站logon -->
				<div id="logo">
					<img src="img/diylogo1.png">
				</div>
				<!-- 导航栏左边标题 -->
				<div id="title">
					<ul>
						<a href="javascript:void(0);" v-for="(item,index) in navigationBar" @click="changeStyle(index)" :style="index==setIndex?navigationBarStyle:''"
						 v-text="item">首页</a>
					</ul>
				</div>
				<!-- 导航栏右边标题 -->
				<div id="titleRight">
					<select @click="doSelect($event)" v-if='isGetName!="登录"'>
						<option value="设置" style="display: none;"></option>
						<option value="个人中心" style="display: none;">个人中心</option>
						<option value="后台管理">后台管理</option>
						<option value="退出登录">退出登录</option>
					</select>
					<a href="login.html" @click.prevent="isLogged($event)" target="_blank" v-text="isGetName" title="登录">登录</a>
				</div>

			</div>
			<div id="list-biBox"  @click.self="hide()">
				<div id="mainContent">
					<div id="music-main">
						<div id="music-head">
							<marquee width="200px" behavior="scroll" scrollamount="6">
								<strong v-text="showPlay">正在播放</strong>
								</marquee>
							<img src="img/search.png" @click.enter="musicSearch()">
							<input type="text" ref="focus" placeholder="输入关键字|歌手|歌曲|按下Enter搜索" v-model="key_name" @keyup.enter="musicSearch()" />
						</div>
						<div id="music-mid">
							<table border="0" cellspacing="0" cellpadding="10px" width="100%">
								<tr>
									<th>音乐标题</th>
									<th>歌手</th>
									<th>专辑</th>
									<th>时长</th>
								</tr>
								<tr v-for="(itme,index) in musicList" :style="index%2==0?tableStyle:tableStyles">
									<td v-cloak>{{index+1}}.{{itme.name}}<img class="playImg" src="img/play.png" @click="musicPlay(itme.id,itme.name)" /></td>
									<td v-cloak>{{itme.artists[0].name}}</td>
									<td v-cloak>{{itme.album.name}}<img :style="itme.mvid==0?MvIsvisible:playImg" src="img/MV.png" @click="playMv(itme.mvid,itme.name)" /></td>
									<td v-cloak>{{itme.duration | changeMinuteSecond}}</td>
								</tr>

								<tr>
									<td colspan="2" style="text-align: center;" @click="backPage()"><label>上一页</label></td>
									<td colspan="2" style="text-align: center;" @click="nextPage()"><label>下一页</label></td>
								</tr>
							</table>
						</div>
						<div id="music-footer">
							<audio :src="musicUrl" id="music" controls="controls" autoplay="autoplay" loop="loop"></audio>
						</div>

						<video :src="musicMv" id="video"  autoplay="autoplay" controls="controls" :style="videoIsPlay==true?videoMvShow:videoMvOff">
						</video>
						
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/music.js"></script>
</html>
